<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue@3.2.23.js"></script>
		<title>vue的模板语法</title>
	</head>
	<body>
		<div id="app">
			<div class="count">{{count}}</div>
			<div class="message" v-text="message"></div>
			<div class="html" v-html="html" ></div>
			<div class="test" :title="title">绑定属性的测试</div>
			<input type="text" :disabled="isDisabeld" />
			<div class="bind_event" v-on:click="myClickEvnet()">点击事件</div>
			<div class="bind_event" @click="myClickEvnet()">简写点击事件</div>
			<input type="text" v-model="age" placeholder="请输入年龄" />
			<button @click="updateAge()">年龄递增</button>
			<div class="name" v-if="num == 1">王祥鑫</div>
			<div class="name" v-else-if="num == 2">张宇</div>
			<div class="name" v-else>王二</div>
			<table border="1" style="text-align: center;">
				<tr>
					<td>商品名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in computAllPrice" :key="index">
					<td>{{val.title}}</td>
					<td>{{val.price}}元</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
						<button @click="increse(index)">增加</button>
						<button @click="decrese(index)">减少</button>
					</td>
				</tr>
				<tr>
					<td colspan="4">支付金额</td>
					<td>{{payPrice}}元</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	// 解构
	const {createApp} = Vue;
	// 创建实例
	const app = createApp({
		// 数据
		data(){
			return {
				// 1.插值语法：{{}}
				count:20,
				// 2.指令
				// 2.1：v-text:文本渲染
				message:"今天我要去吃烤鸭",
				// 2.2:v-html：类似于innerHTML，会识别HTML标签
				html:"<strong>我是很强壮的</strong>",
				// 2.3：v-bind:绑定属性,简写为:
				title:'我是一个提示信息',
				isDisabeld:false,
				// 2.4:v-on:绑定监听事件,简写为：@
				// 2.5：v-model:数据的双向绑定
				age:18,
				// 2.6:v-if/v-else-if/v-else
				num:4,
				// 2.7:v-for:循环
				goods:[{title:'一只酸奶牛',price:10,chooseNum:0},{title:'苏打水',price:3,chooseNum:0}],
				// 3：计算属性:computed
				// 4.侦听器
			}
		},
		methods:{
			myClickEvnet(){
				alert(123)
			},
			updateAge(){
				this.age++
			},
			increse(index){
				this.goods[index].chooseNum++
			},
			decrese(index){
				if(this.goods[index].chooseNum<=0){
					return
				}
				this.goods[index].chooseNum--
			},
			result(val){
				console.log(456);
				return val.chooseNum * val.price;
			}
		},
		// 计算器(属性)
		computed:{
			computAllPrice(){
				return this.goods.map(val =>{
					const allPrice = val.chooseNum * val.price;
					return {
						...val,
						allPrice
					}
				})
			},
			payPrice(){
				let sumPrice = 0;
				this.computAllPrice.forEach(val => {
					sumPrice += val.allPrice
				})
				return sumPrice;
			}
		},
		// 侦听器
		watch:{
			age(newAge,oldAge){
				console.log(`变化之前${oldAge}`);
				console.log(`变化之后${newAge}`);
			}
		},
		mounted() {
			setInterval(()=>{
				this.count++
			},1000)
		},
		beforeCreate() {
			
		},
		created() {
			
		},
		beforeMount() {
			
		},
		beforeUpdate() {
			
		},
		updated() {
			
		},
		beforeUnmount() {
			
		},
		unmounted(){
			
		}
	});
	// 挂载
	const vm = app.mount("#app")
</script>